<template>
    <main-wrap>
        <template v-slot:header>
            <Header title="拍卖结果"/>
        </template>
        <div class="mainbox">
          <div class="auTime">
              <h3>拍卖起始时间</h3>
              <p>{{aDetail.auctionStartTime}}  至  {{aDetail.auctionEndTime}}</p>
          </div>

          <div class="goodsItem">
            <div class="imgBox">
                <Image :url="aDetail.goodsImageUrl"/>
            </div>
            <div class="con">
              <div class="title">{{aDetail.title}}</div>
              <div class="artist">艺术家：{{aDetail.artistName || '--'}}</div>
              <div class="subtitle">
                {{aDetail.subtitle}}
              </div>
              <div class="price" v-if="aDetail.currentPrice">成交金额<em>￥{{aDetail.currentPrice.decimalTwoString}}</em></div>
            </div>
          </div>

          <div class="jpResult" v-if="aDetail.auctionStatus == 3">
            <div class="headerImg">
              <Image :url="aDetail.bidderHeadImageUrl"/>
            </div>
            <div class="nickname">拍卖中标者</div>
            <div class="user">{{aDetail.bidderName}} / {{aDetail.bidderPhone}}</div>
            <div class="fg">—</div>
            <p>拍卖成交金额</p>
            <div class="price">￥{{aDetail.currentPrice.decimalTwoString}}</div>
          </div>
          
          <div class="rdbox">
            <div class="rdcj">出价记录</div>
            <Record v-if="goodsId" :id="goodsId"/>
          </div>
        </div>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import Header from '@/components/header.vue'
import Result from './components/result.vue'
import Record from '@/components/record.vue'
import Image from '@/components/image.vue'
export default {
    props:{

    },
    components:{
        mainWrap,
        Header,
        Result,
        Record,
        Image
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            goodsId:'',
            aDetail:{}
        })

        onMounted(()=>{
          state.goodsId = route.params.id
          store.dispatch('arApi/my_jion_auction_detail',{goodsId:state.goodsId})
          .then(res =>{
            state.aDetail = res.data
          })
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .mainbox{
        padding: 30px 40px;
        .auTime{
          height: 155px;
          text-align: center;
          background: linear-gradient(180deg, #014343 0%, rgba(1, 67, 67, 0) 100%);
          h3{
            line-height: normal;
            font-size: 34px;
            font-weight: 400;
            color: var(--baseColor);
            padding: 30px 0 0 0;
          }
          p{
            font-size: 26px;
            margin: 0;
            padding: 10px 0 0 0;
          }
        }
        .goodsItem{
          display: flex;
          background: rgba(14, 97, 97, 0.7);
          padding: 20px;
          .imgBox{
            width: 140px;
            height: 160px;
          }
          .con{
            flex: 1;
            font-size: 26px;
            padding: 0 0 0 20px;
            width: 0;
            .title{
              margin: 0;
              padding: 0;
              font-weight: 500;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
            }
            .artist{
              color: var(--baseColor);
              padding: 10px 0 0 0;
            }
            .subtitle{
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              line-height: 36px;
              margin: 12px 0 0 0;
              max-height: 70px;
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .price{
              font-weight: 400;
              color: rgba(244, 194, 139, 0.5);
              font-size: 30px;
              padding: 10px 0 0 0;
              em{
                font-size: 34px;
                color: var(--baseColor);
                font-style: normal;
              }
            }
          }
        }
        .jpResult{
          position: relative;
          z-index: 10;
          width: 100%;
          height: 390px;
          background: url('/images/od1.png') left top no-repeat;
          background-size:100% 100%;
          margin: 120px 0 0 0;
          font-size: 26px;
          text-align: center;
          &::before{
            content: '';
            position: absolute;
            z-index: 10;
            left: 0;
            top: -18px;
            height: 42px;
            width: 100%;
            background: url('/images/od2.png') left top no-repeat;
            background-size:100% auto;
          }
          .headerImg{
            position: absolute;
            z-index: 10;
            width: 170px;
            height: 170px;
            overflow: hidden;
            border-radius: 50%;
            left: 50%;
            top: -85px;
            margin: 0 0 0 -85px;
            background:#fff;
          }
          .nickname{
            padding: 104px 0 0 0;
          }
          .user{
            font-size: 30px;
            color: var(--baseColor);
            padding: 10px 0 0 0;
          }
          .fg{
            padding: 0
          }
          .price{
            font-size: 38px;
            color: var(--baseColor);
            font-weight: 500;
            padding: 10px;
          }
        }
        .rdbox{
            border: 1px solid var(--baseColor);
            padding: 30px;
            margin: 40px 0 0 0;
            .rdcj{
              font-size: 42px;
              font-weight: 500;
              padding: 10px 0 40px 0;
              margin: 0;
              color: var(--baseColor);
              text-align: center;
            }
        }
    }
    
</style>